<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
		<title>大食品网</title>
		<link rel="stylesheet" href="css/reset.css" />
		<link rel="stylesheet" href="css/store.css" />
	</head>
	<body>
		<div class="layout">
			
			<!--header-->
			<div class="wrapper">
				<div class="header">
					<a class="s_preson" href="#" target="_blank"> < 首页</a>
					<div class="store">
						<span>订单确认</span>
					</div>
				</div>
			</div>
			
			<div class="address">
				<p class="add-tips">您还没有添加收货人信息，请添加</p>
				<form class="addForm">
					<ul>
						<li><span>选择城市：</span><select class="select"><option value="">请选择：</option><option value="">北京</option></select><label>﹀</label></li>
						<li><span>选择城区：</span><select class="select"><option value="">请选择：</option><option value="">朝阳区</option></select><label>﹀</label></li>
						<li><span>选择社区：</span><select class="select"><option value="">请选择：</option><option value="">泛海国际</option></select><label>﹀</label></li>
						<li class="ways"><span>选择配送方式：</span><input type="radio" id="radio-dev-1" name="radio" class="radio" checked /><label for="radio-dev-1"><em></em> 粮店送货</label><input type="radio" id="radio-dev-2" name="radio" class="radio" /><label for="radio-dev-2"><em></em>自提（每单减1元）</label>
							<p><input type="text" class="addTips" value="填写收货人姓名" /></p>
							<p><input type="text" class="addTips" value="填写收货地址/*我们仅提供本小区配送业务"  /></p>
							<p><input type="text" class="addTips addTel" value="填写收货人电话" /><input type="radio" id="radio-tel-1" name="radio-tel" class="radio" /><label for="radio-tel-1"><em></em> 送货前需电话预约</label></p>
						</li>
					</ul>
				</form>
			</div>
			
			<ul class="main-content">
				<li class="list-item">
					<div class="list-img"><a href="#"><img src="img/default.jpg" alt="" /></a></div>
					<div class="list-content">
						<a href="#"><h3 class="list-title">五谷康石磨全麦面粉 450g/袋</h3></a>
						<p class="list-price"><em>$65</em>&nbsp;<i>√赠</i></p>
						<div class="list-main">微信支付<span>立减<i>3</i>元</span></div>
						<div class="list-add"><em class="prev">-</em><input type="text" size="5" value="0"/><em class="next">+</em></div>	
					</div>
				</li>
				<li class="list-item">
					<div class="list-img"><a href="#"><img src="img/default.jpg" alt="" /></a></div>
					<div class="list-content">
						<a href="#"><h3 class="list-title">五谷康石磨全麦面粉 450g/袋</h3></a>
						<p class="list-price"><em>$65</em>&nbsp;<i>√赠</i></p>
						<div class="list-main">微信支付<span>立减<i>3</i>元</span></div>
						<div class="list-add"><em class="prev">-</em><input type="text" size="5" value="0"/><em class="next">+</em></div>
					</div>
				</li>
			</ul>
			
			<div class="method clearfix">
				<h2 class="method-title">付款方式</h2>
				<ul class="method-way">
					<li><span>货到付款</span><input type="radio" id="radio-met-1" name="radio-met" class="radio-met" /><label for="radio-met-1"></label></li>
					<li><span>微信支付<i>立减</i></span><input type="radio" id="radio-met-2" name="radio-met" class="radio-met" /><label for="radio-met-2"></label></li>
					<li><span>网银支付</span><input type="radio" id="radio-met-3" name="radio-met" class="radio-met" /><label for="radio-met-3"></label></li>
				</ul>
				<div class="total">
					<p><span>订单总额：</span><em>155</em></p>
					<p><span>微信立减：</span><em>-8</em></p>
					<p><span>自提立减：</span><em>0</em></p>
					<p><span>使用粮票：</span><em>-5</em></p>
					<p><input type="text" class="addTips" value="输入粮票编码"  /></p>
					<p class="totalNum">总计：<em>$1555</em></p>
				</div>
				<div class="settlement">去支付</div>
			</div>
			
			
		</div>
	</body>
</html>
<script type="text/javascript" src="js/zepto.min.js" ></script>
<script type="text/javascript">
$(function(){
	(function(){
		//表单获取焦点和失去焦点
		var val;
		$('input[type=text]').focus(function(){
			val = $(this).val();
			$(this).val('');
		}).blur(function(){
			$(this).val(val);
		})
		
		//商品加减统计
		var listItem = $('.list-item');
		var listAdd  = listItem.find('.list-add');
		for(var i=0;i<listItem.length;i++){
			fnMain(listItem.eq(i));
		};
				
		function fnMain(quantityCur){
			var oPrev = quantityCur.find('.prev');
			var oNext  =   quantityCur.find('.next');
			var formInput =   quantityCur.find('input');
			
			var num=0;
			
			oPrev.click(function(){
				if(num>0){
					num--;
				};
				formInput.val(num);
			});
			oNext.click(function(){
				num++;
				formInput.val(num);
			});
		};
	})()
});
</script>